<template>
	<view class="buyExperience-box flex-center w100">
		<!-- 购买记录 -->
		<view class="but-log flex-center" @click="toLog">
			<text class="text">购买记录</text>
		</view>
		<view class="user-card flex-row-center">
			<image src="/static/user/vip_bg.png" class="vip-bg" mode="widthFix"></image>
			<view class="user-info flex-row-center">
				<image :src="userInfo.avatar" class="avatar" mode="aspectFill"></image>
				<view class="user-right">
					<text class="name">{{userInfo.nickname}}</text>
					<!-- <text class="tips">您还未购买体验卡</text> -->
					<view class="flex-row-center">
						<text class="tips" v-if="userInfo.level_name">{{userInfo.level_name}}会员</text>
						<text class="tips" v-else>初级会员</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 购买列表 -->
		<view class="buy-list w100">
			<up-scroll-list indicatorColor="#5B6868" indicatorActiveColor="#66DEC2">
				<view @click="changeCurrent(item,index)"
					:class="[buyInfo.currentId==item.g_id?'active-item':'','buy-item','flex-center']"
					v-for="(item,index) in buyInfo.list" :key="item.g_id">
					<text class="name w100">{{item.vip_name}}{{item.name}}</text>
					<view class="vip-center flex w100">
						<text class="price">￥{{item.price}}</text>
						<text class="tips">{{item.validity_period}}天</text>
					</view>
				</view>
			</up-scroll-list>
		</view>
		<!-- 购买说明 -->
		<view class="buy-tips w100">
			<text class="tips" v-if="buyInfo.introduce">体验卡说明：{{buyInfo.introduce}}</text>
		</view>
		<!-- 购买方式 -->
		<view class="buy-type w100">
			<choosePayVue :payType="buyInfo.payType" @changePayType="changePayType" style="width: 100%;">
			</choosePayVue>
			<!-- 协议说明 -->
			<view class="agreement-box flex-center">
				<up-checkbox labelColor="#999999" shape="circle" size="30rpx" labelSize="24rpx" label="已阅读并同意" activeColor="#8BDEB7"
					@change="changeChecked" name="agree" :checked="buyInfo.checked">
				</up-checkbox>
				<view class="content flex-row-center">
					<text class="agreement-name" @click="toProtocol(3)">《支付协议》</text>
				</view>
			</view>
		</view>
		<!-- 购买盒子 -->
		<view class="buy-option flex-center w100">
			<view class="buy-content flex-center w100">
				<view class="option-left">
					<text class="tips">{{buyInfo.name}}</text>
					<text class="price">￥{{buyInfo.price}}</text>
				</view>
				<up-button text="立即购买" @click="submitBuy" loadingText="提交中"
					:customStyle="{'color':'#115B56',height:'68rpx',width:'280rpx',margin:'0'}"
					:loading="buyInfo.loading" color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"
					shape="circle"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		toast
	} from '../../uni_modules/uview-plus';
	import {
		userInfoStore
	} from '@/stores/user.js';
	const userStore = userInfoStore();
	const userInfo = ref(computed(() => userStore.userInfo));
	import choosePayVue from '@/components/choosePay/choosePay.vue';
	import {
		usePay
	} from '@/hooks/usePay.js';
	const {
		appPay
	} = usePay();
	const buyInfo = reactive({
		payType: 'wechat',
		loading: false,
		checked: false,
		currentId: 0,
		price: 0,
		introduce: "",
		name: '',
		list: []
	});
	onLoad(() => {
		getvipList()
	})
	const changePayType = (e) => {
		buyInfo.payType = e
	};
	const changeChecked = (e) => {
		buyInfo.checked = e
	};
	const changeCurrent = (item) => {
		buyInfo.currentId = item.g_id;
		buyInfo.price = item.price;
		buyInfo.name = item.vip_name + item.name;
		buyInfo.introduce = item.introduce;
	}
	const getvipList = async () => { //获取vip列表
		const res = await $Api.user.vipInfo();
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				buyInfo.currentId = res.data.list[0].g_id;
				buyInfo.price = res.data.list[0].price;
				buyInfo.introduce = res.data.list[0].introduce;
				buyInfo.name = res.data.list[0]?.vip_name + res.data.list[0]?.name;
				arr = res.data.list;
				buyInfo.list = arr;
			}
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	const submitBuy = async () => { //购买
		if (!buyInfo.checked) {
			uni.showToast({
				title: '请先同意协议',
				icon: 'none'
			})
			return
		}
		buyInfo.loading = true;
		const res = await $Api.order.submitOrder({
			type: 'wechat',
			method: 'miniapp',
			goods_id: buyInfo.currentId,
			isBalance: buyInfo.payType === 'balance' ? 1 : 0,
			relationType: 'Purchase',
		}, true);
		const {
			data
		} = res;
		if (res.code == 1) {
			if (buyInfo.payType === 'balance') { //余额支付
				uni.showToast({
					title: '购买成功',
				});
				setTimeout(() => {
					buyInfo.loading = false;
					restInfo();
				}, 1000)
			} else { //微信支付
				appPay({
					provider: 'wxpay',
					timeStamp: data.pre_payment.timeStamp,
					nonceStr: data.pre_payment.nonceStr,
					package: data.pre_payment.package,
					signType: data.pre_payment.signType,
					paySign: data.pre_payment.paySign,
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '购买成功'
						});
						setTimeout(() => {
							buyInfo.loading = false;
							restInfo();
						}, 1000)
					} else if (res.code == 100) { //取消支付
						buyInfo.loading = false;
						uni.$u.toast('取消支付！');
					}
				}).catch((err) => {
					buyInfo.loading = false;
					uni.$u.toast(err);
				})
			}

		} else {
			buyInfo.loading = false;
			uni.$u.toast(res.msg);
		}
	};
	const restInfo = () => { //重置
		buyInfo.checked = false;
		userStore.getUserInfo();
		userStore.getAccount();
		// userStore.changeAccountInfo('available_balance', buyInfo.price); //更新余额
	}
	const toProtocol = (type) => { //阅读协议
		uni.navigateTo({
			url: '/pages/protocol/protocol?type=' + type
		})
	}
	const toLog = () => {
		uni.navigateTo({
			url: '/page_user/views/buyCardLog'
		})
	}
</script>

<style lang="scss" scoped>
	.buyExperience-box {
		padding: 20rpx;
		flex-direction: column;
		position: relative;
		padding-bottom: calc(122rpx + env(safe-area-inset-bottom));
	}

	.but-log {
		width: 160rpx;
		background: $btn-bg-color;
		height: 38rpx;
		border-radius: 27rpx 0 0 27rpx;
		position: absolute;
		right: 0;
		top: 18rpx;

		.text {
			color: $btn-text-color;
			font-size: 24rpx;
		}
	}

	.user-card {
		width: 628rpx;
		height: 180rpx;
		margin: 52rpx auto;
		box-shadow: 0rpx 10rpx 20rpx 2rpx rgba(190, 230, 252, 0.3);
		border-radius: 24rpx;
		margin-top: 62rpx;
		opacity: 0.96;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		padding: 0 38rpx;

		.avatar {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}

		.vip-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.user-right {
			display: flex;
			flex-direction: column;

			.name {
				color: #486373;
				font-size: 38rpx;
			}

			.tips {
				color: #486373;
				font-size: 24rpx;
			}
		}
	}

	.buy-list {
		.buy-item {
			margin: 24rpx 12rpx;
			flex-shrink: 0;
			width: 220rpx;
			height: 280rpx;
			box-sizing: border-box;
			flex-direction: column;
			padding: 18rpx;
			box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(190, 230, 252, 0.3);
			border-radius: 16rpx;

			&:not(:last-child) {}

			.name {
				text-align: center;
				color: $title-color;
				font-size: 32rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.vip-center {
				text-align: center;
				flex-direction: column;
				margin-top: 32rpx;

				.price {
					color: $price-color;
					font-size: 38rpx;
				}

				.tips {
					color: $description-color;
					font-size: 24rpx;
					margin-top: 12rpx;
				}
			}
		}

		.active-item {
			border: 4rpx solid #7EDE9E;
		}
	}

	.buy-tips {
		margin-top: 32rpx;
		color: $description-color;
		font-size: 24rpx;

	}

	.buy-type {
		.agreement-box {
			width: 100%;
			margin: 16rpx 0;
			justify-content: center;

			.content {
				font-weight: 500;
				font-size: 24rpx;
				margin-left: 8rpx;

				.text {
					color: #999999;
				}

				.agreement-name {
					color: #559992;
				}
			}
		}
	}

	.buy-option {
		position: fixed;
		width: 750rpx;
		bottom: 0;
		background-color: #191C1F;
		border-top: 2rpx solid #303335;
		padding-bottom: env(safe-area-inset-bottom);

		.buy-content {
			height: 122rpx;
			justify-content: space-between;
			padding: 0 20rpx;

			.option-left {
				display: flex;
				flex-direction: column;

				.price {
					color: $price-color;
					font-size: 32rpx;
				}

				.tips {
					color: $description-color;
					font-size: 24rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>